<template>
  <view class="pointsExchange-page">
    <!-- 头部背景 -->
    <view class="zzy-top-backgroup">
      <image src="https://hniuniu-oss.oss-cn-hangzhou.aliyuncs.com//upload/56/20240714/6b4618b597706104fac4cd80c2296f59.jpg" mode="widthFix" class="backgroud-image"></image>
    </view>
    <!-- 顶部自定义导航 -->
    <!-- #ifdef APP-PLUS -->
    <u-navbar fixed placeholder title="金豆转积分" :autoBack="true" bgColor="transparent"> </u-navbar>
    <!-- #endif -->
    
    <view class="relative m-t-30 m-l-50 font36">类型</view>
    <view class="container-box flex m-t-30">
      <view class="flex-center" style="width: 21rpx">
        <image src="@/static/img/dfg3ew.webp" style="width: 21rpx; height: 126rpx"></image>
      </view>
      <view class="flex-column-b w100 p-r-20 p-l-30 font34">
        <view class="justify-b w100" @tap="showPicker = true">
          <view>转出： {{ startingPointName }}</view>
          <u-icon name="arrow-down"></u-icon>
        </view>
        <u-divider lineColor="#D2D2D2" style="width: 100%"></u-divider>
        <view class="w100">转入： 绿色积分 </view>
      </view>
    </view>

    <view class="relative m-t-50 m-l-50 font36">
      可转数量：<text v-if="startingPointName == '金豆'">{{ JDbalance }}</text
      ><text v-else>{{ YJDbalance }}</text> {{ startingPointName }}
    </view>
    <view class="container-box flex m-t-30">
      <u--input placeholder="请输入转换数量" type="digit" border="bottom" v-model="startingPointNum"></u--input>
    </view>

    <view class="relative m-t-50 m-l-50 font36">可得到积分数量：</view>
    <view class="container-box flex m-t-30">
      <u--input placeholder="请输入转换数量" type="digit" disabled disabledColor="#fff" border="bottom" v-model="startingPointNum"></u--input>
    </view>

    <view style="width: 90%; margin: 200rpx auto">
      <u-button type="primary" text="确认转换" shape="circle" @click="submit"></u-button>
    </view>

    <u-picker :show="showPicker" :columns="columns" closeOnClickOverlay @cancel="showPicker = false" @close="showPicker = false" @confirm="showPicker = false" @change="changePicker"></u-picker>
  </view>
</template>

<script>
var app = getApp()
export default {
  onLoad() {
    this.checkTheJDBalance()
  },
  data() {
    return {
      showPicker: false,
      columns: [['金豆', '佣金豆']],
      startingPointName: '金豆',
      startingPointNum: 0,
      JDbalance: 0, //金豆余额
      YJDbalance: 0 //佣金豆余额
    }
  },
  methods: {
    changePicker(e) {
      this.startingPointName = e.value[0]
    },
    checkTheJDBalance() {
      let that = this
      app.get('ApiAgent/commissionSurvey', {}, function (res) {
        that.JDbalance = res.userinfo.money
        that.YJDbalance = res.userinfo.commission
      })
    },
    submit() {
      let that = this
      if (that.startingPointNum == 0) return

      if (that.startingPointName == '金豆') {
        if (that.startingPointNum > Number(that.JDbalance)) {
          uni.showToast({
            title: '金豆余额不足',
            icon: 'none'
          })
          return
        }
        app.post('ApiAgent/money2score', { money: that.startingPointNum }, function (res) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          that.checkTheJDBalance()
        })
      } else {
        if (that.startingPointNum > Number(that.YJDbalance)) {
          uni.showToast({
            title: '佣金豆余额不足',
            icon: 'none'
          })
          return
        }
        app.post('ApiAgent/commission2score', { money: that.startingPointNum }, function (res) {
          console.log(res)
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          that.checkTheJDBalance()
        })
      }
    }
  }
}
</script>

<style>
pages {
  background-color: #f5f7fa;
}
</style>

<style lang="scss" scoped>
.pointsExchange-page {
  width: 100%;
  position: absolute;
  /* 顶部背景图 start */
  .zzy-top-backgroup {
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;

    .backgroud-image {
      width: 100%;
      // will-change: transform;
    }
  }
  /* 顶部背景图 end */

  .container-box {
    width: 90%;
    margin: 0 auto;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 14rpx;
    position: relative;
  }
}
</style>
